@utility bg-material-vision-recessed {
  background: linear-gradient(
      0deg,
      rgba(208, 208, 208, 0.5),
      rgba(208, 208, 208, 0.5)
    ),
    rgba(0, 0, 0, 0.1);
  background-blend-mode: color-burn, luminosity;
  box-shadow:
    inset 0px -0.5px 1px rgba(255, 255, 255, 0.3),
    inset 0px -0.5px 1px rgba(255, 255, 255, 0.25),
    inset 0px 1.5px 4px rgba(0, 0, 0, 0.08),
    inset 0px 1.5px 4px rgba(0, 0, 0, 0.1);
}
@utility bg-material-vision-thin {
  background: linear-gradient(
      0deg,
      rgba(94, 94, 94, 0.13),
      rgba(94, 94, 94, 0.13)
    ),
    rgba(255, 255, 255, 0.07);
  background-blend-mode: color-dodge, lighten;
}
@utility bg-material-vision {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
    rgba(214, 214, 214, 0.45);
  background-blend-mode: luminosity, color-burn;
}
@utility bg-material-vision-thick {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    rgba(218, 218, 218, 0.92);
  background-blend-mode: luminosity, color-burn;
}

@utility bg-material-glass {
  background-color: rgba(128, 128, 128, 0.3);
  background-blend-mode: luminosity;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(50px);

  /* TODO 渐变内阴影 */
  /*&::before {*/
  /*    content: '';*/
  /*    position: absolute;*/
  /*    !*top: 1.4px;*!*/
  /*    !*left: 1.4px;*!*/
  /*    !*right: 1.4px;*!*/
  /*    !*bottom: 1.4px;*!*/

  /*    top: 0;*/
  /*    left: 0;*/
  /*    right: 0;*/
  /*    bottom: 0;*/
  /*    background: linear-gradient(rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 57%, rgba(255,255,255,0.1) 100%);*/
  /*    !*background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), transparent); !* 内阴影渐变 *!*!*/
  /*    mask: linear-gradient(rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 57%, rgba(255,255,255,0.1) 100%, transparent); !* 遮罩，控制内阴影显示区域 *!*/
  /*    pointer-events: none; !* 防止遮挡点击事件 *!*/

  /*    clip-path: inset(1.4px 1.4px 1.4px 1.4px); !* 裁剪出内部区域 *!*/
  /*    pointer-events: none; !* 防止遮挡点击事件 *!*/
  /*}*/
}

@utility text-primary-vision {
  @apply bg-clip-text;
  background-color: rgba(255, 255, 255, 0.96);
  color: rgba(255, 255, 255, 0.96);
}
@utility text-secondary-vision {
  @apply bg-clip-text;
  background-image: linear-gradient(0deg, #545454, #545454);
  background-color: rgba(255, 255, 255, 0.23);
  background-blend-mode: color-dodge, lighten;
  color: rgba(255, 255, 255, 0.23);
}
@utility text-tertiary-vision {
  @apply bg-clip-text;
  background-image: linear-gradient(
    0deg,
    rgba(94, 94, 94, 0.21),
    rgba(94, 94, 94, 0.21)
  );
  background-color: rgba(255, 255, 255, 0.11);
  background-blend-mode: color-dodge, normal;
  color: rgba(255, 255, 255, 0.11);
}

@utility bg-control-fill {
  @apply bg-control-fill--idle;

  &:hover {
    @apply bg-control-fill--hover;
  }

  &:focus {
    @apply bg-control-fill--pinch;
  }

  &:disabled {
    @apply bg-control-fill--disabled;
  }
}

@utility bg-control-fill--idle {
  background: linear-gradient(
      0deg,
      rgba(94, 94, 94, 0.18),
      rgba(94, 94, 94, 0.18)
    ),
    rgba(255, 255, 255, 0.07);
  background-blend-mode: color-dodge, normal;
}

@utility bg-control-fill--hover {
  background: linear-gradient(
      0deg,
      rgba(94, 94, 94, 0.06),
      rgba(94, 94, 94, 0.06)
    ),
    rgba(255, 255, 255, 0.04);
  background-blend-mode: color-dodge, lighten;
}

@utility bg-control-fill--pinch {
  background: linear-gradient(
      0deg,
      rgba(94, 94, 94, 0.36),
      rgba(94, 94, 94, 0.36)
    ),
    rgba(255, 255, 255, 0.16);
  background-blend-mode: color-dodge, lighten;
}

@utility bg-control-fill--disabled {
  background: linear-gradient(
      0deg,
      rgba(94, 94, 94, 0.06),
      rgba(94, 94, 94, 0.06)
    ),
    rgba(255, 255, 255, 0.04);
  background-blend-mode: color-dodge, lighten;
}

@utility bg-separator-vision {
  background: linear-gradient(
      0deg,
      rgba(94, 94, 94, 0.15),
      rgba(94, 94, 94, 0.15)
    ),
    rgba(255, 255, 255, 0.07);
  background-blend-mode: color-dodge, lighten;
}
